<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style>
        html, body {
        	height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }
        .content {
        	height: 100%;
        	padding: 0 46px;
        	display: -webkit-box;
        	-webkit-box-align: center;
        }
        .main {
        	width: 100%;
        	border-radius: 5px;
        	background-color: #fff;
        	overflow: hidden;
        }
        .main .main_t {
        	height: 50px;
        	line-height: 50px;
        	font-size: 16px;
        	color: #333;
        	text-align: center;
        	border-bottom: 1px solid #e8e8e8;
        }
        .main .main_b {
        	padding: 15px;
        }
        .info {
            color: #999;
            font-size: 12px;
            margin-bottom: 10px;
        }
        .address_box {
            display: -webkit-box;
            display: -webkit-flex;
            padding-bottom: 5px;
        }
        .address_box .address_boxl {
            padding-right: 5px;
        }
        .address_box .address_boxl img {
            width: 18px;
            display: block;
        }
        .address_box .address_boxr {
            width: 0;
            flex: 1;
            -webkit-flex: 1;
            box-flex: 1;
            -webkit-box-flex: 1;
        }
        .address_box .address_boxr .address {
            font-size: 13px;
            color: #333;
        }
        .btn_box {
        	padding-top: 15px;
            display: -webkit-box;
            display: -webkit-flex;
        }
        .btn_box .btn {
        	height: 38px;
        	line-height: 38px;
        	border-radius: 5px;
        	text-align: center;
        	font-size: 15px;
        	color: #fff;
            padding: 0 10px;
        	background-color: #d6d6d6;
        }
        .btn_box .btn span {
        	font-size: 12px;
        }
        .btn_box .btn2 {
        	background-color: #e62442;
            flex: 1;
            -webkit-flex: 1;
            box-flex: 1;
            -webkit-box-flex: 1;
            margin-left: 10px;
        }
    </style>
</head>
<body>
	<div class="content" id="dialog">
	    <div class="main">
	    	<div class="main_t">指派订单</div>
	    	<div class="main_b">
	    		<div class="info">距离<span class="shop_distance">&nbsp;&nbsp;</span>km | 配送费RM <span class="delivery_price">&nbsp;&nbsp;</span></div>
	    		<div class="address_box">
                    <div class="address_boxl">
                        <img src="../image/merchant_address.png">
                    </div>
                    <div class="address_boxr">
                        <div class="address shop_address">&nbsp;</div>
                    </div>
                </div>
                <div class="address_box">
                    <div class="address_boxl">
                        <img src="../image/client_address.png">
                    </div>
                    <div class="address_boxr">
                        <div class="address user_address">&nbsp;</div>
                    </div>
                </div>
                <div class="btn_box">
                	<div class="btn" tapmode onclick="toRejectOrder();">取消<span>(今天还剩<span class="reject_time">&nbsp;&nbsp;</span>次)</span></div>
                	<div class="btn btn2" tapmode onclick="toTakeOrder();">接单</div>
                </div>
	    	</div>
	    </div>
	</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
    apiready = function(){
        orderId = api.pageParam.orderId;
        staffData = $api.getStorage('staff_data');

        var userAddress = api.pageParam.userAddress?api.pageParam.userAddress:'';
        var shopAddress = api.pageParam.shopAddress?api.pageParam.shopAddress:'';
        var shopDistance = api.pageParam.shopDistance?api.pageParam.shopDistance:0;
        var rejectTime = api.pageParam.rejectTime?3-api.pageParam.rejectTime:3;
        var deliveryPrice = api.pageParam.deliveryPrice?api.pageParam.deliveryPrice:0;
        $(".shop_distance").html(shopDistance);
        $(".delivery_price").html(deliveryPrice);
        $(".shop_address").html(shopAddress);
        $(".user_address").html(userAddress);
        $(".reject_time").html(rejectTime);
        /*$(document.body).on('touchend', function(e) {
            var dialog = $('#dialog')[0];
            if (!$.contains(dialog, e.target)) {
                $('#dialog').removeClass('in');
                setTimeout(function() {
                    api.closeFrame();
                }, 200);
            }
        });*/
    };

    function toTakeOrder () {
        openLoading();
        api.ajax({
            url: rootPath + '/api/staff/to_take_order',
            method: 'post',
            data: {
                values: { 
                    staff_id: staffData.id,
                    staff_token: staffData.token,
                    oid:orderId,
                },
            }
        }, function(ret, err) {
            if (ret) {
                if(ret.status == 200){
                    toast('接单成功');
                    api.sendEvent({
                        name: 'appointSuccess',
                        extra: {
                            orderId: orderId, 
                        }
                    });
                }else if(ret.status == 202){
                    toast('订单已过期');
                    closeLoading();
                    setTimeout(function() {
                        api.closeFrame();
                    }, 200);
                }else{
                    toast('接单失败');
                }
                closeLoading();
                api.sendEvent({
                    name: 'checkNextAppoint',
                });
                setTimeout(function() {
                    api.closeFrame();
                }, 200);
            }else{
                api.sendEvent({
                    name: 'checkNextAppoint',
                });
                toast(err.msg);
                closeLoading();
            }
        });
    };

    // 取消接单
    function toRejectOrder() {
        openLoading();
        api.ajax({
            url: rootPath + '/api/staff/to_reject_order',
            method: 'post',
            data: {
                values: { 
                    staff_id: staffData.id,
                    staff_token: staffData.token,
                    oid:orderId,
                },
                
            }
        }, function(ret, err) {
            if (ret) {
                if(ret.status == 200){
                    toast('取消成功');
                    closeLoading();
                    setTimeout(function() {
                        api.closeFrame();
                    }, 200);
                }else if(ret.status == 201){
                    toast('每天3次取消接单次数已用完');
                    closeLoading();
                }else if(ret.status == 202){
                    toast('订单已过期');
                    closeLoading();
                    setTimeout(function() {
                        api.closeFrame();
                    }, 200);
                }
                api.sendEvent({
                    name: 'checkNextAppoint',
                });
            }else{
                api.sendEvent({
                    name: 'checkNextAppoint',
                });
                toast(err.msg);
                closeLoading();
            }
        });
    }
</script>
</html>

